import 'package:flutter/material.dart';

/// 账户中心
class AccountCenterDemo extends StatefulWidget {
  const AccountCenterDemo({Key? key}) : super(key: key);

  @override
  _AccountCenterDemoState createState() => _AccountCenterDemoState();
}

class _AccountCenterDemoState extends State<AccountCenterDemo> {
  @override
  Widget build(BuildContext context) {
    // 获取屏幕宽度
    var screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text("账户中心"),
        centerTitle: true,
        backgroundColor: Colors.transparent, // 透明化
        elevation: 0,
      ),
      extendBodyBehindAppBar: true, //扩展body的高度到AppBar下面
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            children: [
              Stack(
                overflow: Overflow.visible,
                children: [buildBgHeader(), buildHeaderMenu(screenWidth)],
              ),
              SizedBox(
                height: 85,
              ),
              buildMenuItem("午餐", "肯德基", 10.000, true),
              buildMenuItem("现金收入", "获取项目奖金", 500.000, false),
              buildMenuItem("买衣服", "办公T恤", 250.000, true),
              buildMenuItem("午餐", "肯德基", 10.000, true),
              buildMenuItem("现金收入", "获取项目奖金", 500.000, false),
              buildMenuItem("买衣服", "办公T恤", 250.000, true),
              buildMenuItem("午餐", "肯德基", 10.000, true),
              buildMenuItem("现金收入", "获取项目奖金", 500.000, false),
              buildMenuItem("买衣服", "办公T恤", 250.000, true),
            ],
          ),
        ),
      ),
    );
  }

  Positioned buildHeaderMenu(double screenWidth) {
    return Positioned(
      top: 185,
      left: 20,
      child: Opacity(
        opacity: 0.9, // 添加透明效果
        child: Container(
          width: screenWidth * 0.9,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(30),
              // 添加阴影渐变
              boxShadow: [
                BoxShadow(
                    color: Colors.grey,
                    offset: Offset(0.0, 1.0),
                    blurRadius: 6.0),
              ]),
          child: Container(
            padding: EdgeInsets.only(top: 35, bottom: 35),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    Text("收入"),
                    SizedBox(
                      height: 10,
                    ),
                    Divider(),
                    Text(
                      "RMB: 500.000",
                      style:
                          TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                    ),
                  ],
                ),
                Column(
                  children: [
                    Text("支出"),
                    SizedBox(
                      height: 10,
                    ),
                    Divider(),
                    Text("RMB: 260.000",
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 18)),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  Container buildBgHeader() {
    return Container(
      width: double.infinity,
      height: 250,
      decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(30),
              bottomRight: Radius.circular(30))),
      child: Padding(
        padding: const EdgeInsets.only(top: 100, left: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "刘祫",
              style: TextStyle(
                  color: Colors.blue,
                  fontWeight: FontWeight.bold,
                  fontSize: 24),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              "134533221199",
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 15,
                  fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
    );
  }

  buildMenuItem(String title, String type, double money, bool isPay) {
    var color = isPay ? Colors.redAccent : Colors.green;
    return Container(
      margin: EdgeInsets.only(left: 10, right: 10, top: 10),
      child: Card(
        child: Container(
          padding: EdgeInsets.only(left: 16, right: 16),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Icon(
                  isPay ? Icons.outbond_outlined : Icons.request_page_sharp,
                  color: color,
                ),
                Expanded(
                    child: Container(
                  margin: EdgeInsets.only(left: 25),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        title,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 18,
                          color: color,
                        ),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Text(
                        type,
                        style: TextStyle(
                          color: Colors.grey,
                          fontSize: 16,
                        ),
                      ),
                    ],
                  ),
                )),
                Text(
                  "RMB $money",
                  style: TextStyle(color: color),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}
